<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从word复制文本加图片没有图片的问题</title>
    <style>
        #paste {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div contenteditable="true" id="paste"></div>
    <img id="img" />
    <script>
        // 参考地址 https://luckyship.github.io/2022/10/11/2022-10-11-quill-support-word-img/
        var paste = document.getElementById('paste');
        document.addEventListener('paste', async function (e) {
            e.preventDefault();
            if (!event.clipboardData) {
                console.error('Clipboard API not available.');
                return;
            }
            const text = event.clipboardData.getData('text/plain')
            console.log(text);

            // 将html提取出来
            const html = event.clipboardData.getData('text/html')
            console.log(html);

            // 将word复制的文件信息提取出来 在将上面的html替换掉
            var pasteData = event.clipboardData.getData('text/rtf');
            console.log(pasteData);
            if (pasteData) {
                var d = extractImageDataFromRtf(pasteData);
                for (let x of d) {
                    //debugger
                    let base64 = convertHexToBase64(x.hex);
                    let src = `data:${x.type};base64,${base64}`;
                    document.getElementById('img').src = src;
                    console.log(src);
                }
            }
        })

        // 将hex格式转化为base64
        function convertHexToBase64(hexString) {
            return btoa(
                hexString
                    .match(/\w{2}/g)
                    .map((char) => {
                        return String.fromCharCode(parseInt(char, 16));
                    })
                    .join("")
            );
        }

        // rtf中提取图片信息
        function extractImageDataFromRtf(rtfData) {
            if (!rtfData) {
                return [];
            }
            const regexPictureHeader =
                /{\\pict[\s\S]+?({\\\*\\blipuid\s?[\da-fA-F]+)[\s}]*/;
            const regexPicture = new RegExp(
                "(?:(" + regexPictureHeader.source + "))([\\da-fA-F\\s]+)\\}",
                "g"
            );
            const images = rtfData.match(regexPicture);
            const result = [];

            if (images) {
                for (const image of images) {
                    let imageType = false;

                    if (image.includes("\\pngblip")) {
                        imageType = "image/png";
                    } else if (image.includes("\\jpegblip")) {
                        imageType = "image/jpeg";
                    }

                    if (imageType) {
                        result.push({
                            hex: image
                                .replace(regexPictureHeader, "")
                                .replace(/[^\da-fA-F]/g, ""),
                            type: imageType,
                        });
                    }
                }
            }
            return result;
        }
    </script>
</body>

</html>